<template>
	<view>		
		<view class="uni-list">
			<checkbox-group v-model="checkList" @change="checkboxChange">
				<div class="uni-list-cell" v-for="item in items" :key="item.nickName">
					<view>
						<checkbox :value="item.nickName" :checked="item.checked" />
						{{item.nickName}} {{item.postName}}
					</view>
				</div>
			</checkbox-group>
			
			<view class="button">
				<button class="centered-button" @click="sasa">确定选择</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				qs:{pn:undefined,cn:undefined},
				title: 'checkbox 复选框',
				ids:[],
				checkList: [],
				items: []
			}
		},
		onLoad(e) {
			this.qs.pn=e.pn;
			this.qs.cn=e.cn;
			console.log(this.qs);
		},
		created() {
			var token = "eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjYxNWNiMTA2LWVlNDQtNDBjZC1iODQ0LTljYzRlZjE1Y2I5OCJ9.8BbKXjHW9PEFqCN1F4eadHjWfhf2V7zZGh6GGsELChOQXYJZlQB1uT8y7f_Dm7bqJSmAv_ZzLIsueB2q3QUeHw";
			
			uni.request({
				url:"/kyhs/task-inf-list/show-user-not-select"+"?parentName="+this.qs.pn+"&deptName="+this.qs.cn,
				method:"GET",
				header:{'Authorization': token}
			}).then(Response =>{
				this.items=Response.data.data;
				console.log(this.items);
			})
		},
		methods: {
			checkboxChange: function (e) {
				var items = this.items,
					names = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(names.includes(item.nickName)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
			},
			sasa(){
				let dsadsa = this.items.filter(res => res.checked === true).map(li => ({ nickName: li.nickName, postName: li.postName, id:li.userId }));
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.otherFun(dsadsa);
				uni.navigateBack({
					delta:1
				});
			}
		}
	}
</script>
<style>
.uni-list-cell {
	border-bottom: 1px solid #ccc;
	padding: 10px 0;
}

.header-container {
  display: flex;
  align-items: center;
}

.title {
  margin-left: 10px; /* 根据需要调整图标和标题之间的间距 */
  text-align: center;
}

/* 分割线 */
.divider {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin: 10px 0;
}

/* 按钮 */
.button {
  text-align: center;
  margin-top: 20px; /* 调整按钮与表格之间的间距 */
}

.centered-button {
  margin: 0 auto; /* 水平居中按钮 */
  display: inline-block;
}

</style>